Ext.define('FrontSuite.shared.view.Wizard', {
    extend: 'Ext.form.Panel',
    alias: 'widget.wizard',
    cls: 'wizard',
    title: 'Wizard',
    autoHeight: true,
    border: true,
    layout: 'card',
    activeItem: 0,
    inWizard: false,
    includeSubTitle: false,

    render: function() {
console.log('0here: Wizard.render()');
        if (this.includeSubTitle) {
            this.setTitle(this.titlePrefix + ' (1 of ' + this.items.length + ') ' + this.getActiveItem().title);
        } else {
            this.setTitle(this.titlePrefix + ' (1 of ' + this.items.length + ')');
        }
console.log('1here: Wizard.render()');
        this.inWizard = true;
        this.callParent(arguments);
console.log('2here: Wizard.render()');
        this.fireEvent('wizardstarted', this);
console.log('3here: Wizard.render()');
        var toolbar = this.getDockedComponent('bottomToolBar');
console.log('4here: Wizard.render()');
        toolbar.child('#prev').disable();
console.log('5here: Wizard.render()');
        if (this.getActiveItem().finishable)
            toolbar.child('#finish').enable();
        else
            toolbar.child('#finish').disable();
console.log('6here: Wizard.render()');
    },

    listeners: {
        beforerender: function() {
console.log('7here: Wizard.render()');
            Ext.each(this.getLayout().getLayoutItems(), function(card) {
                card.preventHeader = true;
            });
        },
        wizardpagechange: function(wizard) {
console.log('8here: Wizard.render()');
            var toolbar = wizard.getDockedComponent('bottomToolBar');
            if (wizard.activeItem > 0) {
                toolbar.child('#next').enable();
                toolbar.child('#prev').enable();
            }

            if (wizard.activeItem == 0) {
                toolbar.child('#prev').disable();
            }

            if (wizard.activeItem == (wizard.items.length - 1)) {
                toolbar.child('#next').disable();
            }

            if (wizard.getActiveItem().finishable)
                toolbar.child('#finish').enable();
            else
                toolbar.child('#finish').disable();

            // Update the title to have the correct page number
            if (this.includeSubTitle) {
                wizard.getActiveItem().preventHeader = true;
                wizard.setTitle(wizard.titlePrefix + ' (' + (wizard.activeItem+1) + ' of ' + this.items.length + ') ' + this.getActiveItem().title);
            } else {
                wizard.setTitle(wizard.titlePrefix + ' (' + (wizard.activeItem+1) + ' of ' + this.items.length + ')');
            }
        }
    },

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        itemId: 'bottomToolBar',
        items: [ '->',
        {
            text: 'Cancel',
            itemId: 'cancel',
            action: 'cancelWizard',
            scope: this,
            handler: function(cancelButton) {
console.log('9here: Wizard.render()');
                var wizard = cancelButton.up('wizard');
                if (wizard.getForm().isDirty()) {
                    Ext.Msg.show({
                        scope: this,
                        title:'Cancelling Wizard',
                        msg: 'All changes will be lost. Are you sure you want to cancel?',
                        buttons: Ext.Msg.YESNO,
                        icon: Ext.Msg.QUESTION,
                        fn: function(buttonId, text, opt) {
                            switch (buttonId) {
                                case 'yes':
                                    wizard.fireEvent('wizardcancelled', wizard);
                                    break;
                                case 'no':
                                    break;
                            }
                        }
                    });
                } else {
                    wizard.fireEvent('wizardcancelled', wizard);
                }
            }
        },
        {
            text: '&laquo; Previous',
            itemId: 'prev',
            action: 'prevWizard',
            scope: this,
            handler: function(prevButton) {
console.log('ahere: Wizard.render()');
                var wizard = prevButton.up('wizard');
                wizard.getLayout().setActiveItem(--wizard.activeItem);
                wizard.fireEvent('wizardpagechange', wizard);
                wizard.fireEvent('wizardprev', wizard);
            }
        },
        {
            text: 'Next &raquo;',
            itemId: 'next',
            action: 'nextWizard',
            scope: this,
            handler: function(nextButton) {
console.log('bhere: Wizard.render()');
                var wizard = nextButton.up('wizard');
                wizard.getLayout().setActiveItem(++wizard.activeItem);
                wizard.fireEvent('wizardpagechange', wizard);
                wizard.fireEvent('wizardnext', wizard);
            }
        },
        {
            text: 'Finish',
            itemId: 'finish',
            action: 'finishWizard',
            scope: this,
            handler: function(finishButton) {
console.log('chere: Wizard.render()');
console.log('action: finishWizard');
console.log(finishButton);
                var wizard = finishButton.up('wizard');
console.log(wizard);
                if (!wizard.getForm().isValid()) {
                    var invalidFields = 'Please correct the following errors before resumitting<br>';
                    wizard.getForm().getFields().each(function(field) {
                        if (!field.isValid()) {
                            invalidFields += '<br><b>' + field.getFieldLabel() + '</b>';
                            invalidFields += '<br>' + field.getErrors(field.getValue());
                            invalidFields += '<br>';
                        }
                    })
                    Ext.Msg.show({
                        scope: this,
                        title:'Wizard Invalid',
                        msg: invalidFields,
                        buttons: Ext.Msg.OK,
                        icon: Ext.Msg.ERROR
                    });
                } else {
                    wizard.inWizard = false;
                    wizard.fireEvent('wizardfinished', wizard);
                }
            }
        }
    ]}],

    getActiveItem: function() {
console.log('dhere: Wizard.render()');
        return this.items.items[this.activeItem];
    }
});

